<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    
    ES6 Set介绍与API - DSRBLOG
    
  </title>
  

  
  
  <link href="atom.xml" rel="alternate" title="DSRBLOG" type="application/atom+xml">
  <link rel="stylesheet" href="asset/css/style.min.css">
  <link rel="stylesheet" href="asset/css/doc.css">
  <script src="asset/app.js"></script>


</head>

<body> <section class="ct-body">
	<div class="container">
		<div class="columns is-variable bd-klmn-columns is-4 is-centered">
			<div class="column is-four-fifths">
				<div class="post-body single-content">
					
					<h1 class="title">
						ES6 Set介绍与API
					</h1>


					<div class="media">
						
						
						<div class="media-content">
							<div class="content">
								<p>
									<span class="date">2022/09/26 17:03 下午</span>
									

									

									<br />
									<span class="tran-tags">Tags:</span>&nbsp;
									
									<a class="tag is-link is-light">#ES6新特性</a>
									

								</p>
							</div>
						</div>

					</div>
				</div>
				<article class="markdown-body single-content">
					<p><code>ES6</code>提供了新的数据结构<code>Set</code>（集合），它类似于数组，但<strong>成员的值都是唯一</strong>的，集合实现了<code>iterator</code>接口，所以可以使用<code>扩展运算符(...)</code>和<code>for...of</code>进行遍历</p>
<h2><a id="set%E7%9A%84%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95%EF%BC%9A" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Set的属性和方法：</h2>
<ol>
<li><code>size</code><strong>：</strong> 返回<code>Set</code>的元素个数</li>
<li><code>add</code><strong>：</strong> 增加一个新元素，返回当前<code>Set</code></li>
<li><code>delete</code><strong>：</strong> 删除元素，返回<code>boolean</code>值</li>
<li><code>has</code> <strong>：</strong> 检测<code>Set</code>中是否包含某个元素，返回<code>boolean</code>值</li>
<li><code>clean</code><strong>：</strong> 清空集合</li>
</ol>
<pre class="line-numbers"><code class="language-js">//声明Set
let s = new Set(['一','二','三','一']);

//返回元素个数
console.log(s.size); //输出3

//添加元素
s.add('四');
console.log(s); //输出 Set(4){'一','二','三','四'}

//删除元素
s.delete('一');
console.log(s); //输出 Set(3){'二','三','四'}

//检测
console.log(s.has('二')); //输出 true

//清空
s.clean()
console.log(s); //输出 Set(0){}
</code></pre>
<h2><a id="set%E5%AE%9E%E8%B7%B5" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Set实践</h2>
<pre class="line-numbers"><code class="language-js">let arr = [1, 2, 3, 4, 3, 2, 1];

//数组去重
let result = [...new Set(arr)];
console.log(result);//输出 [1,2,3,4]

//交集
let arr2 = [3, 4, 5, 4, 3];
let result2 = [...new Set(arr)].filter(item =&gt; new Set(arr2).has(item));

console.log(result2);//输出 [3,4]

//并集
let union = [...new Set([...arr, ...arr2])];
console.log(union);//输出 [1,2,3,4,5]

//差集
let diff = [...new Set(arr)].filter(item =&gt; !(new Set(arr2).has(item)));
console.log(diff);//输出 [1,2]
</code></pre>

				</article>
				<div class="comments-wrap">
					<div class="share-comments">
						

						

						
					</div>
				</div><!-- end comments wrap -->
			</div>
		</div><!-- end columns -->
	</div><!-- end container -->
</section>  














<script src="asset/prism.js"></script>









</body>

</html>